<template>
  <div class="assetDetails tabbar-iOS-height hideScrollBar" ref="scrollEl">
    <div class="content">
      <!-- 导航 -->
      <NavBar
        isFixed
        :isShowLeft="false"
        :title="t('mvp.assetDetails.text0')"
        isTransparent
        :navScorllOffset="60"
        navScorllColor="#fff"
        :scrollEl="scrollEl"
      />
      <!-- 客户端渲染 -->
      <ClientOnly>
        <!-- 下拉刷新 -->
        <van-pull-refresh
          class="pull-refresh"
          v-model="pageData.loading"
          :pulling-text="t('mvp.other.text9')"
          :loosing-text="t('mvp.other.text10')"
          loading-text=" "
          @refresh="onRefreshRequest(true)"
        >
          <!-- 余额显示 -->
          <div class="balance">
            <img class="balance-iconbg" src="/image/assetDetails/icon-bg.svg" />
            <div class="items-center">
              <div class="balance-title">{{ t("mvp.assetDetails.text1") }}</div>
              <DhTooltip
                style="flex: 1"
                :offsetSj="15"
                :offset="-10"
                width="170px"
                @init-call="(call) => (pageData.tooltip = call)"
              >
                <Images
                  @click="tooltipClick(1)"
                  class="tooltip-icon"
                  src="/image/mvp/assetDetails/exclamationFFF.svg"
                />
                <template v-slot:content>
                  <div class="tooltip-text">
                    {{
                      $t("mvp.assetDetails.text21").replace(
                        "0.0001",
                        pageData.lastRecyclePrice || "0.001"
                      )
                    }}
                  </div>
                </template>
              </DhTooltip>
            </div>
            <!-- 余额 -->
            <div
              class="items-center"
              style="margin-top: 15px; align-items: baseline"
            >
              <div class="balance-assets">
                {{
                  toThousands(
                    decimalToLength(
                      new Decimal(pageData.pledgeValue || 0).add(
                        new Decimal(freeAmount)
                      )
                    )
                  )
                }}
              </div>
              <div class="balance-assets-bdc" style="margin-left: 5px">BDC</div>
              <template v-if="Number(freeAmountMy) < 0.01">
                <div class="balance-assets-bdc" style="margin-left: 5px">
                  &lt
                </div>
                <div class="balance-assets-bdc" style="margin-left: 3px">
                  $0.01
                </div>
              </template>
              <template v-else>
                <div class="balance-assets-bdc" style="margin-left: 5px">≈</div>
                <div class="balance-assets-bdc" style="margin-left: 3px">
                  ${{ toThousands(freeAmountMy) }}
                </div>
              </template>
            </div>
            <!-- 质押数量 -->
            <div class="balance-bottom">
              <div
                class="balance-pledge items-center"
                style="margin-bottom: 8px"
              >
                <div>{{ $t("pledge.kyyeBtn") }}</div>
                <div>{{ toThousands(pageData.pledgeValue) }} BDC</div>
              </div>
              <div class="balance-pledge items-center">
                <div>{{ $t("pledge.kyye") }}</div>
                <div>{{ toThousands(freeAmount) }} BDC</div>
              </div>
            </div>
          </div>
          <!-- 内容背景 -->
          <div class="content-bg">
            <!-- 明细、提币、充币 -->
            <div
              class="items-center btns"
              style="justify-content: space-between"
            >
              <div
                class="btns-item items-center"
                @click="jumpPage('incomeStatement')"
              >
                <Images
                  class="btns-img"
                  src="/image/assetDetails/jymx-icon.svg"
                />
                <div class="btns-item-title">
                  {{ t("mvp.assetDetails.text9") }}
                </div>
              </div>
              <div class="btns-item items-center">
                <Images
                  class="btns-img"
                  src="/image/assetDetails/cz-icon.svg"
                />
                <div class="btns-item-title">
                  coming soon
                  <!-- {{ t("mvp.assetDetails.text3") }} -->
                </div>
              </div>
              <div class="btns-item items-center">
                <Images
                  class="btns-img"
                  src="/image/assetDetails/tx-icon.svg"
                />
                <div class="btns-item-title">
                  coming soon
                  <!-- {{ t("mvp.assetDetails.text2") }} -->
                </div>
              </div>
            </div>
            <!-- 获取更多 BDC -->
            <div class="balance-more" @click="jumpPage('miningDesc')">
              {{ $t("mvp.moreBdc") }}
            </div>
            <!-- BDC 趋势 -->
            <div class="bdcTrend">
              <div class="bdcTrend-title">{{ $t("mvp.jgqsBdc") }}</div>
              <div class="bdcTrend-desc">
                {{ $t("mvp.wbcfuzy") }}
              </div>
              <img
                class="bdcTrend-img"
                src="/image/assetDetails/bdcTrend-logo.svg"
              />
              <div class="bdcTrend-desc" style="margin-bottom: 0">
                {{ $t("mvp.fxjdesc1") }}
                <span style="color: #007bff">$0.0001</span>
                {{ $t("mvp.fxjdesc2") }}
                <span style="color: #007bff">$0.001</span>
                {{ $t("mvp.fxjdesc3") }}
                <span style="color: #007bff">$5</span>
                {{ $t("mvp.fxjdesc4") }}
              </div>
            </div>
            <!-- 新版柱状图 -->
            <Histogram></Histogram>
            <!-- banner 位置 -->
            <!-- <div class="banner" v-if="pageData.bannerList.length > 0">
            <van-swipe :autoplay="3000" lazy-render indicator-color="#007BFF">
              <van-swipe-item
                v-for="image in pageData.bannerList"
                :key="image.id"
                @click="jumpPage(image, true)"
              >
                <Images class="banner-img" :src="image.pic_path" isHttp />
              </van-swipe-item>
            </van-swipe>
          </div> -->
            <!-- BDC 秘籍 -->
            <div class="desc">
              <div class="desc-title">
                {{ t("mvp.assetDetails.text15") }}
              </div>
              <div class="desc-text items-center">
                <img
                  class="desc-icon"
                  src="/image/assetDetails/desc-logo.svg"
                />
                {{ t("mvp.assetDetails.text17") }}
              </div>
              <div class="desc-text items-center">
                <img
                  class="desc-icon"
                  src="/image/assetDetails/desc-logo.svg"
                />
                {{ t("mvp.assetDetails.text18") }}
              </div>
              <div class="desc-text items-center">
                <img
                  class="desc-icon"
                  src="/image/assetDetails/desc-logo.svg"
                />
                {{ t("mvp.assetDetails.text19") }}
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="assetDetails">
import {
  navigateI18nTo,
  isiOS,
  decimalToLength,
  toThousands,
  getOssFileUrl,
  jumpLocalH5PageRoute,
} from "@/utils";
import { getUserAccount } from "../../../api/user";
// import { getTendencyChart, getBannerList } from "../../../api/bdc";
import { useGlobalStore } from "~~/store/global";
import { JUMPAPPS } from "~/config";
import { usePageCacheStore } from "~~/store/modules/pageCache";
import DhTooltip from "../../../components/mvp/dh-tooltip.vue";
import Histogram from "@/components/assetDetails/histogram.vue";
import Decimal from "decimal.js";

// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
// const route = useRoute();
// console.log(isiOS.value, "页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

const globalStore = useGlobalStore();

// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// 接收滚动事件，传递给导航组件
const scrollEl = ref();

const pageCache = usePageCacheStore();

// 页面属性
const pageData = reactive({
  whiteTheme: true,
  tooltip: {},
  tooltip1: {},
  loading: false,
  bannerList: [],
  pledgeValue: 0,
  lastRecyclePrice: null,
});

// API 账户信息
const userAccount = ref({});
// 可用 BDC 余额
const freeAmount = computed(() => {
  return decimalToLength(
    (userAccount.value && userAccount.value.freeAmount) || 0
  );
});

// 可用 BDC 余额
const freeAmountMy = computed(() => {
  return decimalToLength(
    new Decimal(pageData.pledgeValue || 0)
      .add(new Decimal(freeAmount.value || 0))
      .mul(pageData.lastRecyclePrice || 0.001)
  );
});

// 页面跳转
const jumpPage = async (type, isApp = false) => {
  // console.log("--val--", type);
  if (isApp) {
    if (type === "taskCenter") {
      bridge.jumpAppRoute(JUMPAPPS()[type]);
    } else if (type === "integralShop") {
      firebase?.logEvent("BDC_H5_AssetDetails_IntegralShop_Click"); // 埋点访问
      bridge.jumpAppRoute(JUMPAPPS()[type]);
    } else if (type.ios_url || type.android_url) {
      if (
        type.ios_url.startsWith("native://") ||
        type.android_url.startsWith("https://btcdana.com/")
      ) {
        bridge.jumpAppRoute(isiOS.value ? type.ios_url : type.android_url);
      } else {
        let thirdUrl = isiOS.value ? type.ios_url : type.android_url;
        // 如果是跳转自己的 h5 页面,则走导航跳转
        if (thirdUrl.startsWith(location.origin + "/fx/")) {
          // 方案一： 路由跳转
          jumpLocalH5PageRoute(thirdUrl);
          // 方案二： 链接加参数
          // jumpLocalH5PageUrl(thirdUrl)
        } else if (thirdUrl.includes("webview=1")) {
          navigateI18nTo({
            path: "/webview",
            query: { src: thirdUrl, title: type.name },
          });
        } else {
          await navigateTo(thirdUrl, {
            external: true,
          });
        }
      }
    }
  } else if (type === "exchangeCoupon") {
    // firebase?.logEvent("BDC_H5_AssetDetails_ExchangeCoupon_Click"); // 埋点访问
    // await navigateI18nTo({ path: "/mvp/exchangeCoupon" });
  } else if (type === "coin") {
    firebase?.logEvent("BDC_H5_AssetDetails_Coin_Click"); // 埋点访问
    await navigateI18nTo({ path: "/mvp/coin/coin" });
  } else if (type === "ranking") {
    firebase?.logEvent("BDC_H5_AssetDetails_Ranking_Click"); // 埋点访问
    await navigateI18nTo({ path: "/mvp/ranking" });
  } else if (type === "incomeStatement") {
    firebase?.logEvent("BDC_H5_AssetDetails_IncomeStatement_Click"); // 埋点访问
    await navigateI18nTo({ path: "/mvp/assetDetails/incomeStatement" });
  } else if (type === "miningDesc") {
    firebase?.logEvent("BDC_H5_AssetDetails_MiningDesc_Click"); // 埋点访问
    await navigateI18nTo({ path: "/mvp/mining/desc" });
  }
};

// 获取 banner 列表
// const getBannerListRequest = async () => {
//   const bannerList = [];
//   const res = await getBannerList({ type: 1 });
//   // console.log("--banner列表--", res);
//   if (res) {
//     res.indexBanner.forEach((element) => {
//       if (element.type == 28) {
//         bannerList.push(element);
//       }
//     });
//     pageData.bannerList = bannerList;
//   }
// };
const onRefreshRequest = async (isRefresh) => {
  try {
    // 1. 账户信息
    const res = await getUserAccount();
    console.log("--账户信息：--", res);
    pageData.lastRecyclePrice = res.lastRecyclePrice;
    pageData.pledgeValue = res.pledgeAmount;
    userAccount.value = res || {};
    pageData.loading = false;
  } catch (error) {
    pageData.loading = false;
  }
  if (isRefresh === true) onLoadRequest(isRefresh);
};
// 不需要频繁的请求
const onLoadRequest = (isRefresh) => {
  // 2. 获取 banner
  // getBannerListRequest();
};
onBeforeMount(() => {
  // console.log("--onBeforeMount--");
  onLoadRequest();
});
onMounted(() => {
  // console.log("--onMounted--");
  // 埋点访问
  firebase?.logEvent("BDC_H5_AssetDetails_PUV", {
    time: Date.now(),
  });
  // 2. 由于升级 3.10.3 版本,导致keepalive出问题,等待官方修复
  onRefreshRequest();
});

onActivated(() => {
  console.log("--onActivated--");
  onRefreshRequest();
});
onDeactivated(() => {
  console.log("--onDeactivated--");
});

//  显示提示
const tooltipClick = (val) => {
  if (val === 1) {
    pageData.tooltip(true);
  } else {
    pageData.tooltip1(true);
  }
};
</script>
<style lang="scss" scoped>
.assetDetails {
  /* 禁止在整个页面范围内的溢出回弹效果 */
  overscroll-behavior-y: none !important;
  position: relative;
  // background: linear-gradient(180deg, #96C9FF 0.07%, rgba(226, 236, 255, 0.30) 99.93%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    #f4f9fe 100%
  );
  // height: calc(100vh - 50 * 2px);
  overflow-y: scroll;
  overflow-x: hidden;
  will-change: scroll-position;

  .content {
    position: relative;
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0.3) 99.93%
    );
    background-size: 100% 370 * 2px;
    background-repeat: no-repeat;
    &-bg {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.6) 0%,
        #f4f9fe 100%
      );
      border-top-left-radius: 12 * 2px;
      border-top-right-radius: 12 * 2px;
      padding: 0 15 * 2px;
      padding-bottom: 40 * 2px;
      border: 3px solid rgba(255, 255, 255, 0.4);
      border-bottom: initial;
      backdrop-filter: blur(30px);
    }
  }
}

.bdcTrend {
  background-color: #fff;
  border-radius: 12 * 2px;
  padding: 15 * 2px 10 * 2px;
  margin: 15 * 2px 0 10 * 2px 0;
  &-title {
    font-size: 15 * 2px;
    font-weight: 590;
    color: #141924;
    margin-bottom: 8 * 2px;
  }
  &-desc {
    font-size: 13 * 2px;
    color: #999da7;
    margin-bottom: 15 * 2px;
    line-height: 16 * 2px;
    word-break: break-word;
  }
  &-img {
    width: 100%;
    margin-bottom: 22 * 2px;
  }
}

.balance {
  box-shadow: 0px 15 * 2px 5px 0px #51a9f9;
  margin: 10 * 2px 15 * 2px 0px 15 * 2px;
  height: 136 * 2px;
  background: linear-gradient(270deg, #51a9f9 30.85%, #007bff 69.15%);
  // background: linear-gradient(180deg, #007bff 0%, #51a9f9 89.69%);
  border-top-left-radius: 16 * 2px;
  border-top-right-radius: 16 * 2px;
  padding: 19 * 2px 20 * 2px 18 * 2px 20 * 2px;
  position: relative;
  &-iconbg {
    position: absolute;
    right: 20 * 2px;
    top: 20 * 2px;
    width: 70 * 2px;
  }
  &-title {
    color: #fff;
    font-size: 12 * 2px;
  }
  &-assets {
    color: #fff;
    font-size: 24 * 2px;
    font-weight: 700;
    margin-bottom: 14 * 2px;
    &-bdc {
      color: #fff;
      font-size: 12 * 2px;
    }
  }
  &-bottom {
    position: absolute;
    width: 343 * 2px;
    left: 12 * 2px;
    bottom: 0;
    padding: 6 * 2px 10 * 2px;
    border-radius: 8 * 2px 8 * 2px 0px 0px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.06) 100%
    );
  }
  &-pledge {
    justify-content: space-between;
    color: #fff;
    font-size: 11 * 2px;
    color: rgba(255, 255, 255, 0.8);
  }
  &-more {
    padding: 13 * 2px 12 * 2px;
    font-size: 13 * 2px;
    font-weight: 590;
    border-radius: 4 * 2px;
    text-align: center;
    color: #fff;
    background: #007bff;
  }
}

.btns {
  height: 108 * 2px;
  // margin-bottom: 20 * 2px;
  &-item {
    width: 33.3333vw;
    flex-direction: column;
    justify-content: center;
    &-img {
      width: 44 * 2px;
      height: 44 * 2px;
    }
    &-title {
      margin-top: 8 * 2px;
      color: #999da7;
      font-size: 12 * 2px;
    }
  }
}

.desc {
  margin-top: 10 * 2px;
  padding: 15 * 2px 10 * 2px 1 * 2px 10 * 2px;
  background-color: #fff;
  border-radius: 12 * 2px;
  &-icon {
    width: 12 * 2px;
    height: 12 * 2px;
    margin-right: 8 * 2px;
  }

  &-title {
    color: #141924;
    font-size: 15 * 2px;
    font-weight: 590;
    margin-bottom: 15 * 2px;
  }
  &-text {
    margin-bottom: 15 * 2px;
    align-items: flex-start;
    color: #999da7;
    font-size: 13 * 2px;
    line-height: 18 * 2px;
    word-break: break-word;
  }
}

.tooltip {
  &-icon {
    margin-left: 6 * 2px;
    width: 18 * 2px;
    height: 18 * 2px;
  }
  &-text {
    padding: 6 * 2px 10 * 2px;
    color: #fff;
    font-size: 11 * 2px;
    word-break: break-word;
  }
}
</style>
<style lang="scss">
.banner {
  .van-swipe__indicator {
    left: 25% !important;
  }
}
:root:root {
  --van-pull-refresh-head-text-color: #fff;
}
.pull-refresh {
  .van-loading__text {
    color: #fff;
  }
  .van-loading--circular {
    color: #fff !important;
  }
}
</style>
